<template>
  <div class="page">
    <div class="breadcrumb">
      <span class="bc-item" v-for="(name,i) in breadcrumb" :key="i">{{ name }}</span>
    </div>
    <div class="explainArea">
      <van-icon name="success" color="#1989fa" >   楼层存在入户调查任务  </van-icon>
      &nbsp;/&nbsp;
      <van-icon name="cross" color="#ee0a24">  楼层未完成入户调查任务  </van-icon>
    </div>
    <div class="explainArea">
      <van-field name="floorType" label="楼层类型">
        <template #input>
          <van-radio-group v-model="floorType" direction="horizontal" @change="floorTypeChange">
            <van-radio name="1">一层</van-radio>
            <van-radio name="2">二至三层</van-radio>
            <van-radio name="3">三层以上</van-radio>
          </van-radio-group>
        </template>
      </van-field>
    </div>
    <van-divider />
    <div class="task-list">
      <div v-for="(item,i) in floorList" :key="i">
        <div v-if="item.STATUS === '1'" class="task-item" @click="gotoCs(item.FLOOR, item.SPEED_ID)">
          <div class="task-icon">
            <van-icon v-if="item.roomNum > 0" name="success" color="#1989fa" />
            <van-icon v-else name="cross" color="#ee0a24"/>
          </div>
          <div class="task-name">{{ item.floorName }}</div>
          <div class="task-percent">{{ item.count_finish }} / {{ item.count_all }}</div>
        </div>
        <div v-if="item.STATUS === '0'" class="task-item disabled">
          <div class="task-icon"></div>
          <div class="task-name">{{ item.floorName }}禁用</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {buildTaskLIst, updateYwlyFloor,} from '@/api/publicline/kdcs'
import { Toast } from 'vant';

export default {
  data() {
    return {
      breadcrumb: [],
      buildingName: "",
      floorList: [],
      floorType: '3'
    }
  },
  created() {
    const { communityId, buildingId, buildingName, breadcrumb } = this.$route.query;
    this.communityId = communityId;
    this.buildingId = buildingId;
    this.buildingName = buildingName;
    this.breadcrumb = breadcrumb.split('/');
    this.getTaskPercent();
  },
  beforeDestroy() {
    Toast.clear();
  },
  methods: {
    getTaskPercent() {
      // 小区任务完成进度
      Toast.loading({
        message: '加载中...',
        loadingType: 'spinner',
      });
      buildTaskLIst( { VILLAGE_ID: this.communityId, BUILD_NO: this.buildingId, FINISH_FLAG: '0'} )
      .then( res => {
        Toast.clear();
        if ( res.success ) {
          const data = res.result.list;
          data.sort( (a,b) => b.FLOOR - a.FLOOR );
          let floorType = []
          for ( const item of data ) {
            const status = item.STATUS
            floorType.push(item.FLOOR + '_' + status)
            if ( item.FLOOR === '1' ) item.floorName = '低楼层';
            if ( item.FLOOR === '2' ) item.floorName = '中间楼层';
            if ( item.FLOOR === '3' ) item.floorName = '高楼层';
            if ( item.FLOOR === '4' ) item.floorName = '电梯';
          }

          if(floorType.indexOf('2_1') !== -1) {
            this.floorType = '3'
          } else if (floorType.indexOf('3_1') !== -1) {
            this.floorType = '2'
          } else {
            this.floorType = '1'
          }

          console.log('---小区任务完成进度', data)
          this.floorList = data;
        }
      } )
    },
    floorTypeChange(floorType) {
      console.log(floorType)
      updateYwlyFloor({villageId:this.communityId, buildId: this.buildingId, floorType: floorType})
        .then( res => {
          Toast.clear();
          if ( res.success ) {
            this.getTaskPercent()
          }
        } )
    },
    gotoCs( posi, speedId ) {
      let name = "";
      switch(posi) {
        case '3': name = '高楼层'; break;
        case '2': name = '中间楼层'; break;
        case '1': name = '低楼层'; break;
      }
      this.$router.push( {
        path: "/publicline/kdcs/cs-form",
        query: {
          type: "YWLY",
          communityId: this.communityId,
          buildingId: this.buildingId,
          posi,
          speedId,
          breadcrumb: this.breadcrumb.concat([name]).join('/')
        }
      } )
    },
  }
}
</script>

<style lang="less" scoped>
.page {
  background: #FFF;
}
.explainArea {
  min-height: 20px;
  font-size: 13px;
  padding: 6px 10px;
}
.breadcrumb {
  min-height: 20px;
  border-bottom: 1px solid #ccc;
  font-size: 13px;
  padding: 6px 10px;
  background: #f2f9ff;

  .bc-item {
    color: #888;

    &:after {
      content: " / ";
    }

    &:last-child {
      color: #000;

      &:after {
        content: "";
      }
    }
  }
}
.task-list {
  padding: 20px 0;

  .task-item {
    padding: 6px 16px;
    margin: 14px auto;
    display: flex;
    border: 1px solid #333;
    border-radius: 6px;
    width: 70%;
    justify-content: space-between;
    align-items: center;

    .task-icon {
      width: 40px;
      height: 40px;
      text-align: left;
      line-height: 40px;
    }
    .task-name {
      flex: 1;
    }
    .task-percent {
      width: 100px;
      text-align: right;
      color: #888;

      &.done {
        color: rgb(0, 164, 0);
        font-weight: bold;
      }
    }
  }
}
&.disabled {
  background: #EEE;
  color: #777;
  border-color: #ccc;
}
</style>